<template>
    <a-render>
        <template #search>
          <SearchForm 
            :span="6" 
            :fields="req" 
            :list="searchFormJSON" 
            :toggle-span="[12, 12]"
            :show-toggle="false"
            @search="callbackSearch"
            @reset="callbackReset"
          ></SearchForm>
        </template>
        <Table ref="tabelRef" :data="dataList" :column="column" :operation="false" @page="changePage">
          <template #left>
            <a-button type="primary" @click="toPage('/libraryadd')" v-has-button="'cangguan_add'">添加藏馆</a-button>
          </template>
          <template #status="data">
            <Tag :type="libraryStatus.useDictItem(data.row.library_status)?.type">
              {{ libraryStatus.useDictItem(data.row.library_status)?.label }}
            </Tag>
          </template>
          <template #operation="data">
            <a-button type="link" @click="toPage('/detailed/' + data.row.id, data.row)">详情</a-button>
            <a-button type="link" @click="toPage('/libraryedit/' + data.row.id, data.row)" v-has-button="'cangguan_edit'">编辑</a-button>
            <a-button type="link" @click="openLibrary(data.row)" v-if="buttonShow('open', data.row.library_status)">开馆</a-button>
            <a-button type="link" @click="closeLibrary(data.row)" v-if="buttonShow('close', data.row.library_status)">闭馆</a-button>
            <a-button type="link" danger @click="deleteLibrary(data.row)" v-if="buttonShow('delete', data.row.library_status)">删除</a-button>
          </template>
        </Table>
    </a-render>
    <LiteratureForm v-model:open="state.openLiterature" v-if="state.openLiterature" :row="state.row" title="新增文献类型" @ok="getList"  />
</template>
<script setup>
import { ref, reactive, onMounted, onActivated } from 'vue'
import { useRouter } from "vue-router"
// 组件
import SearchForm from "@/components/searchForm/search.vue"
import Table from "@/components/table/index.vue"
import Tag from "@/components/tag/index.vue"
// modal
import LiteratureForm from "../component/form.vue"
// 搜索和表格配置
import { column } from "./column"
import { useSearchForm } from "./search"
// hook
import { useTable, useTagsViews } from "@/hook/index"
import { useLiterature } from "./use-literature"
import { useLibrary } from "../use-library"
import { useDict } from "@/dict/index"
const router = useRouter()

const tabelRef = ref(null)
const { uesSetTotal, usePage, useSize, useSearch, useReset } = useTable(tabelRef)
const { useGetLibraryList, dataList } = useLiterature()
const { useDeleteLibrary, useOpenLibrary, useCloseLibrary } = useLibrary()
const { useSetTagsTitle } = useTagsViews()
const { useDictItem } = useDict()
// 藏馆状态
const libraryStatus = useDict('libraryStatusModules')
// 搜索配置项
const { searchFormJSON } = useSearchForm()
// 请求参数
const req = reactive({
  pageIndex: usePage,
  pageSize: useSize,
  literature_name: "",
  status: ""
})

const handelOk = () => {
  console.log('异步请求成功，回调')
}

const state = reactive({
  row: {},
  openLiterature: false,
})

const openModal = (key, row = {}) => {
  state.row = row
  state[key] = true
}

const toPage = (url, row) => {
  useSetTagsTitle(row.library_name)
  router.push(url)
}

/**
 * 删除
 */
const deleteLibrary = (row) => useDeleteLibrary(row).then(() => getList())

/**
 * 开馆
 */
 const openLibrary = (row) => useOpenLibrary(row).then(() => getList())

 /**
 * 闭馆
 */
const closeLibrary = (row) => useCloseLibrary(row).then(() => getList())

/**
 * 列表数据模拟 
 */
const getList = () => useGetLibraryList(req).then(params => uesSetTotal(params?.content?.total))
/**
 * 分页
 */
const changePage = (page, size) => {
  req.pageIndex = page
  req.pageSize = size
  getList()
}

/**
 * 搜索
 */
const callbackSearch = () => {
  useSearch()
  getList()
}
/**
 * 设置
 */
const callbackReset = () => {
  useReset()
  getList()
}

/**
 * 按钮的显示状态
 */
const buttonShow = (key, value) => libraryStatus.useDictItemStatus(key, value)

/**
 * 是否显示开馆按钮
 */
// const isShowOpenButton = (row) => libraryStatus.useDictItem(row.library_status)?.open
// const isShowOpenButton = (row) => {
//   return libraryStatus.useDictItemStatus('open', row.library_status)
// }
/**
 * 是否显示开馆按钮
 */
//  const isShowCloseButton = (row) => libraryStatus.useDictItem(row.library_status)?.close
/**
 * keep-alive
 */
 onActivated(() => {
  getList()
})
</script>